<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索框</title>
		<style>
			*{
				box-sizing: border-box;
			}
			body{
				width: 100vw;
				height: 100vh;
				background-color: dodgerblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.searchBar{
				width: 400px;
				height: 60px;
				background-color: #fff;
				box-shadow: 0 0 10px rgba(0, 0, 0, .4);
				border-radius: 60px;
				position: relative;
				overflow: hidden;
			}
			.icon{
				width: 60px;
				height: 60px;
				background-color: #fff;
				
				border-radius: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			.icon::before{
				content: '';
				width: 15px;
				height: 15px;
				border-radius: 50%;
				border: 3px solid dodgerblue;
				position: absolute;
				transform: translate(-4px,-4px);
			}
			.icon::after{
				content: '';
				width: 3px;
				height: 12px;
				background-color: dodgerblue;
				transform: translate(6px,6px) rotate(315deg);
				
				
				
			}
			.textInput{
				width: 320px;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: blue;
				position: absolute;
				top: 0;
				left: 60px;
				
				
			}
			.textInput input{
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				font-size: 18px;
			}
			.clear{
				width: 15px;
				height: 15px;
				position: absolute;
				right: 22%;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.clear::before{
				content: '';
				width: 1px;
				height: 15px;
				background-color: #999;
				transform: rotate(45deg);
				position: absolute;
				
			}
			.clear::after{
				content: '';
				width: 1px;
				height: 15px;
				background-color: #999;
				transform: rotate(315deg);
				
			}
			#go{
				width: 12%;
				height: 60%;
				position: absolute;
				top: 20%;
				right: 0;
				border-radius: 8px;
				columns: #fff;
				box-shadow: 0 0 2px rgba(0, 0, 0, .4);
				background: linear-gradient(skyblue,deepskyblue);
				
			}
			#go:hover{
				cursor: pointer;
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<form action="target.html" method="get">
		<div class="searchBar">
			<div class="icon"></div>
			<div class="textInput">
				<input type="text" placeholder="请输入搜索内容.." />
				<input type="submit" value="go" id="go">
				<div class="clear"></div>
			</div>
		</div>
		</form>
	</body>
</html>